<template>
  <div class="layout">
    <header class="header"><layoutHeader /></header>
    <main class="main">
      <layoutMain />
    </main>
    <footer class="footer"><layoutFooter /></footer>
  </div>
</template>

<script setup lang="ts">
import layoutHeader from "./layout/layout-header.vue";
import layoutMain from "./layout/layout-main.vue";
import layoutFooter from "./layout/layout-footer.vue";
</script>

<style scoped lang="scss">
.layout {
  display: flex;
  flex-direction: column;
  position: relative;
  .main {
    flex: 1;
  }
  .footer {
    width: 100%;
    position: absolute;
    bottom: 2rem;
    float: bottom;
  }
}
</style>
